<template>
  <div class="searchList">
    <van-nav-bar
      title="搜索列表"
      fixed
      placeholder
      z-index="999"
      left-arrow
      @click-left="$router.back()"
    />
    <van-pull-refresh
      v-model="isRefresh"
      @refresh="onRefresh"
      loading-text="正在加载中..."
      success-text="刷新成功"
      animation-duration="2000"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="get_article_list"
      >
        <div
          v-for="item2 in article_list"
          :key="item2._id"
          class="box"
          @click="
            $router.push({
              name: 'detail',
              query: { article_id: item2._id },
            })
          "
        >
          <div>作者 ： {{ item2.author }}</div>
          <div>标题 ： {{ item2.title }}</div>
          <div
            :class="{
              hide: item2.poster_type == 1,
              rightimg: item2.poster_type == 2,
              actiImg: item2.poster_type == 3,
            }"
          >
            <img
              v-for="item3 in item2.imageSrc"
              :src="item3"
              alt=""
              :key="item3._id"
            />
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { Tab, Tabs, List, PullRefresh } from "vant";
export default {
  data() {
    return {
      article_list: [],
      skip: 0, //当前被选中的分类总条数
      limit: 20, //当前被选中的分类总页数
      loading: false,
      finished: false,
      isRefresh: false, //  是否正在刷新
      key_word: "",
    };
  },
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
  },
  created() {
    this.key_word = this.$route.query.key_word;
  },
  methods: {
    onRefresh() {
      this.skip = 0;
      this.finished = false;
      this.get_article_list(true);
    },
    // 文章列表
    get_article_list(flag) {
      let { key_word, skip, limit } = this;
      this.$http({
        url: "/api/search",
        method: "GET",
        //传参
        params: {
          key_word,
          skip,
          limit,
        },
      }).then((res) => {
        console.log(res.data);
        if (flag) {
          //  如果是刷新操作
          this.isRefresh = false; //  结束下拉刷新的转圈
          this.article_list = res.data; //  替换为新的
        } else {
          this.article_list.push(...res.data); //  新数据和老数据 拼接
        }

        // this.article_list.push(...res.data); //  新数据和老数据 拼接

        let len = this.article_list.length; //  数量

        //  判断数据加载完了吗    res.count 服务器返回  数据的总数

        if (len >= res.count) {
          this.finished = true; //  数据加载完了  再滑也别触发事件了
        } else {
          this.skip = len; // skip  更新
          this.loading = false; //  我可以继续去加载
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.searchList {
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;

  .box {
    width: 100%;
    padding-top: 20px;
    .rightimg {
      img {
        width: 100%;
        height: 200px;
        background-size: cover;
      }
    }
    .hide {
      img {
        width: 100%;
        height: 200px;
      }
    }
    .actiImg {
      img {
        width: 33%;
        height: 100px;
        background-size: cover;
      }
    }
  }
}
</style>